<template>
   <div class="leftContent">
       <div class="leftContent-title">
           <span>
               <i class="el-icon-s-fold font"></i>
           </span>
           <span v-if="xianji =='海南省'" >{{titleList}}-{{xianji}}</span>
           <span v-if="xianji !=='海南省'">{{titleList}}-海南省-{{xianji}}</span>
           <span v-show="showInfo" @click="backKList()">
               <i class="el-icon-back back">返回</i>
           </span>
       </div>
       <!-- 列表 -->
       <div class="leftContent-con" v-show="showlist" v-if="eventListData.length>0">
           <div class="leftContent-top">
               <div class="leftContent-top-inner" v-for="(item,index) in eventListData" :key="index" @click="viewInfo(item,index)" :class="{ 'leftContent-top-inner': true, isActive: rowIndex == index }">
                   <!-- <div class="leftContent-top-innerleft">
                       <img src="/images/yjjy/inner-img.png" alt="">
                   </div> -->
                   <div class="leftContent-top-innerright">
                     <div class="leftContent-top-innerright-title">
                         <span>
                            <img src="/images/yjjy/title.png" alt="">
                         </span>
                         <span>{{item.title}}</span>
                     </div>
                     <div class="leftContent-top-innerright-type">
                         <span>
                             <img src="/images/yjjy/type.png" alt="">
                         </span>
                         <span>类型：</span>
                         <span>{{item.disasterName}}</span>
                     </div>
                     <div class="leftContent-top-innerright-time">
                         <span>
                               <img src="/images/yjjy/时间.png" alt="">
                         </span>
                         <span>时间：</span>
                         <span>{{item.happenTime}}</span>
                     </div>
                   </div>
               </div>
           </div>
       </div>
       <div class="leftContent-Nocon" v-if="eventListData.length == 0">
           暂无数据
       </div>
       <!-- 事件详情 -->
       <div class="leftContent-info" v-show="showInfo">
           <div class="leftContent-infotitle">
               <img src="/images/yjjy/基本信息.png" alt="">
               <span>基本信息</span>
               <span @click="emergencyReport">突发事件专报</span>
               <!-- <span>突发事件专报</span> -->
           </div>
           <div class="leftContent-infotcon">
               <div class="leftContent-infotcon-top">
                   <!-- <div class="leftContent-infotcon-topleft">
                       <img src="/images/yjjy/inner-img.png" alt="">
                   </div> -->
                   <div class="leftContent-infotcon-topright">
                       <div class="leftContent-infotcon-topright-title">
                           <span>事件名称：</span>
                           <span>{{infoContent.title}}</span>
                       </div>
                        <div class="leftContent-infotcon-topright-title">
                           <span>事件类型：</span>
                           <span>{{infoContent.disasterName}}</span>
                       </div>
                        <div class="leftContent-infotcon-topright-title">
                           <span>事件等级：</span>
                           <span>{{infoContent.disasterLevel}}</span>
                       </div>
                   </div>
               </div>
               <div class="leftContent-infotcon-bot">
                   <div class="leftContent-infotcon-botpot">
                       <span>灾害地点：</span>
                       <span>{{infoContent.address}}</span>
                   </div>
                   <div class="leftContent-infotcon-botpot">
                       <span>报送部门：</span>
                       <span>{{infoContent.receiveReportDept}}</span>
                   </div>
                   <div class="leftContent-infotcon-botpotdes" >
                       <span>灾害描述：</span>
                       <span v-html="infoContent.description"></span>
                   </div>
               </div>
           </div>
       </div>
       <!-- 分页数据 -->
       <div class="leftContent-bot" v-show="showbot" v-if="eventListData.length>0">
              <el-pagination
                     @current-change="handleCurrentChange"
                     v-model:currentPage="currentPage"
                     :page-size="pageSize"
                      background
                      pager-count="4"
                     layout="total,prev, pager, next"
                     :total="totals">
				>
			</el-pagination>
        </div>
        <div class="listInfo" id="listInfoEarth">
            <div class="listInfo-title">
                <span>{{listInfoData.title}}</span>
                <span @click="closeInfo">
                    <i class="el-icon-close closeinfo"></i>
                </span>
            </div>
            <div class="listInfo-middle">
                <!-- 受伤 -->
                <div class="listInfo-middleinfo1">
                    <div>
                        <span>{{infoList1.title}}</span>
                    </div>
                    <div>
                        <span>{{listInfoData.injuredNum}}人</span>
                    </div>
                </div>
                <!-- 失踪 -->
                 <div class="listInfo-middleinfo2">
                    <div>
                        <span>{{infoList2.title}}</span>
                    </div>
                    <div>
                       <span>{{listInfoData.missNum}}人</span>
                    </div>
                    
                </div>
                <!-- 死亡 -->
                 <div class="listInfo-middleinfo3">
                    <div>
                        <span>{{infoList3.title}}</span>
                    </div>
                    <div>
                        <span>{{listInfoData.deathNum}}人</span>
                    </div>
                </div>
            </div>
            <div class="listInfo-bot">
                <div  @click="clickimpact(listInfoData)">
                    <!-- <i class="el-icon-map-location poi"></i> -->
                    <span>应急资源</span>
                </div>
                <div>
                    <span>上报时间：</span>
                    <span>{{listInfoData.sendTime}}</span>
                </div>
         
            </div>
        </div>
        <!-- 应急资源弹框 -->
        <div class="impactAnalysis" id="impactAnalysis" v-show="showimpactAnalysis">
            <div class="impactAnalysis-title">
                <span>应急资源</span>
                <span @click="closeimpactAnalysis">
                    <i class="el-icon-close closeinfo"></i>
                </span>
            </div>
            <div class="impactAnalysis-radius">
                <span>半径：</span>
                <span>
                     <el-input-number v-model="num" size="small" controls-position="right" @change="handleChange" :min="1" ></el-input-number>
                </span>
                <span>
                    公里
                </span>
            </div>
            <div class="impactAnalysis-jingdu">
                <span>经度：</span>
                <span>
                    {{showimpactAnalysisData.lon}}
                </span>
            </div>
            <div class="impactAnalysis-jingdu">
                <span>纬度：</span>
                <span>
                    {{showimpactAnalysisData.lat}}
                </span>
            </div>
            <div class="eventBriefing" @click="emergencyBrief">
                突发事件简报
            </div>
            
        </div>
        <!-- 突发事件专报 -->
        <div class="specialNewspaper" v-show="showReport">
             <EventReport  :eventInfo="currentEvent" @closeReport="closeReport"></EventReport>
        </div>
        <!-- 突发事件简报 -->
        <div class="emergencyBriefing" v-show="showCommandReport">
            <eventCommandReport  :eventInfo="currentEvent" @closeReport="closeCommand"></eventCommandReport>
        </div>
        <!-- 应急资源-->
   </div>
</template>

<script>
import axios from "axios";
import EventReport from "../../sjzx/sjzxRight/thematicReport/emergencyReport/EventReport.vue"
// import CommandReport from '../../sjzx/sjzxRight/thematicReport/emergencyReport/CommandReport.vue'
import eventCommandReport from './eventCommandReport.vue'
// import { userRegion } from "vuex";
export default {
    data(){
        return{
            num:5.0,
            showlist:true,
            radius:5,
            titles:"海南省",
            // radius:5,
            showbot:true,
            rowIndex: -1,
            titleList:"事件列表",
            title:"海南省",
            showInfo:false,
            totals:100,
            currentPage:1,
            pageSize:10,
            eventListData:[],
            infoContent:{},
            model:[],
            listInfoData:{},
            showimpactAnalysis:false,
            showimpactAnalysisData:{
                lon:0,
                lat:0
            },
            region:'',
            xianji:'',
            infoList1:{title:"受伤",count:"0"},
            infoList2:{title:"失踪",count:"0"},
            infoList3:{title:"死亡",count:"0"},
            currentEvent:{},
            showReport:false,
            showCommandReport:false
        }
    },
    created(){
        if (localStorage.userRegion) {
            this.region = localStorage.userRegion
        }
        if(this.region){
            this.xianji = this.region
        }
        this.initEvent()
    },
    mounted(){
        this.iconClick() 
    },
    // computed:{
    //     // let store = useStore();
    //     userRegion(){
    //        return store.state.userRegion;
    //     }
        // console.log(userRegion)
    // },
    components:{
        EventReport,
        eventCommandReport
    },
    // beforeDestroy(){
    //     console.log(234)
    //     layerManager.removeAll();
    // },
    // onBeforeUnmount() {
    //     layerManager.removeAll();
    // },
    methods:{
        closeCommand(){
            this.showCommandReport = false
        },
        // 突发事件简报
        emergencyBrief(){
              axios
                 .get(`${sjzxUrl}/api/disaster/one?id=${this.infoContent.id}`)
                 .then(res => {
                     if(res.data.code == 200){ 
                          res.data.data.imgUrl = viewer.scene.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
                          res.data.data.radius = this.radius
                         this.currentEvent = res.data.data
                         this.showCommandReport = true
                        //  const eventReport1 = window.document.getElementById("Emergencybrie");
                        //  eventReport1.style.left="600px"
                        //  eventReport1.style.top="110px"
                     }
                 });
        },
        closeReport() {
            this.showReport = null;
        },
        // 突发事件专报
        emergencyReport(){
             axios
                 .get(`${sjzxUrl}/api/disaster/one?id=${this.infoContent.id}`)
                 .then(res => {
                     if(res.data.code == 200){
                        //  res.data.data.imgUrl = viewer.scene.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
                         this.currentEvent = res.data.data
                         this.showReport = true
                        //  const eventReport = window.document.getElementById("eventReport");
                        //  eventReport.style.left="600px"
                        //  eventReport.style.top="110px"
                        //  console.log(res.data.data)
                     }
                 });
        },
        closeimpactAnalysis(){
            // console.log(234)
            const oneDiv = window.document.getElementById("impactAnalysis");
            oneDiv.style.display = "none";
            this.showimpactAnalysisData={}
            this.num =5.0
            // this.showimpactAnalysis = false
        },
        handleChange(value){
        //    this.radius = value
           let obj = {}
           obj.lng = this.showimpactAnalysisData.lon
           obj.lat  = this.showimpactAnalysisData.lat
           obj.radius = value
           this.$mybus.emit('resourceEmitData',obj);
           this.showCricle(this.showimpactAnalysisData.lon,this.showimpactAnalysisData.lat,value)
        },
        handleCurrentChange(val){
            // console.log(val)
            this.initEvent()
        },
        initEvent(){
            let baseurl = window.loginUrl;
            let obj ={
                pageNum:this.currentPage,
                pageSize:this.pageSize,
                xzqh:this.region
            }
			let that = this
            axios({
			     	url: `${baseurl}/api/disaster/selectByParamPage`,
			     	method: 'post',
                    data:obj
			     }).then((res) => {
                     if(res.data.code == 200){
                         that.totals = res.data.data.total
                         that.eventListData = res.data.data.rows
                }
		    })
        },
        viewInfo(item,index){
            this.rowIndex = index
            this.showlist = false
            this.showbot = false
            this.titleList ="事件详情"
            this.showInfo = true
            this.infoContent = item
            layerManager.fly(
                        item.lon,
                        item.lat,
                        40000,
                        6.242337420973824,
                        -1.543879601177395,
                        0
                    );
            this.dataToviewer(item,"/data/images/icon/disaster.png","应急资源")
            // this.showCricle(this.showimpactAnalysisData.lon,this.showimpactAnalysisData.lat,value)
        },
        backKList(){
            this.showlist = true
            this.showbot = true
            this.titleList ="事件列表"
            this.showInfo = false
            const oneDiv = window.document.getElementById("impactAnalysis");
            oneDiv.style.display = "none";
            this.$mybus.emit('resetchildActiveList', true);
             this.num =5.0
            // this.showimpactAnalysisData=null
            // this.showimpactAnalysis = false
        },
        dataToviewer(data,img,dataType) {
            if(viewer.entities){
              viewer.entities.removeAll()
            }
          this.entity = viewer.entities.add({
		  cursor: true,
		  data: data,
          dataType:dataType,
          dataPosition:[data.lon,data.lat],
					position: Cesium.Cartesian3.fromDegrees(data.lon, parseFloat(data.lat)),
					billboard: {
						image: img,
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
						horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
						width: 48,
						height: 50,
					},
				})
         this.model.push(this.entity)
		},
        addBoundInfoBox(positionValue, elementId){
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let that = this
            let preRenderListener = viewer.scene.postRender.addEventListener(()=>{
                  let elWidth = oneDiv.offsetWidth;
                  let elHeight = oneDiv.offsetHeight;
                  if(that.screenWidth  === 1920){
                    elWidth = oneDiv.offsetWidth
                    elHeight = oneDiv.offsetHeight
                  }else if(that.screenWidth  === 3840){
                    elWidth = oneDiv.offsetWidth -1920;
                    elHeight = oneDiv.offsetHeight
                  }
                  const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
                    var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                    var alt=cartographicPosition.height;
                    var positions = [
                            Cesium.Cartographic.fromDegrees(lng,lat)
                    ];
                    var carto=new Cesium.Cartographic.fromDegrees(lng,lat)　　//输入经纬度
                    var h2=viewer.scene.sampleHeight(carto);
					
                    // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
                    var position1 = Cesium.Cartesian3.fromDegrees(lng, lat,h2);//加入高度之后，不会飘，但是不能解决地球缩放问题
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position1,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1.4 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
            })
		 },
        iconClick(){
            let that = this
             var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
              handlerVideo.setInputAction((movement) => {
                  if(viewer._selectedEntity && viewer._selectedEntity._dataType =="应急资源"){
                    //   console.log(viewer._selectedEntity._data)
                     that.listInfoData = viewer._selectedEntity._data
                      that.addBoundInfoBox(viewer._selectedEntity._position._value,"listInfoEarth")
                  }
                //   console.log(viewer._selectedEntity && viewer._selectedEntity._type =="资源树")
              },Cesium.ScreenSpaceEventType.LEFT_CLICK)
        },
        closeInfo(){
            let info = window.document.getElementById("listInfoEarth");
            if(info){
                info.style.display = "none"
            }
        },
        clickimpact(item){
            console.log(item)
            let impactAnalysis =  window.document.getElementById("impactAnalysis")
            if(impactAnalysis){
                impactAnalysis.style.display = "block"
            }
            this.showCricle(item.lon,item.lat,5)
            this.showimpactAnalysisData = item
            let info = window.document.getElementById("listInfoEarth");
            if(info){
                info.style.display = "none"
            }
            let obj = {}
           obj.lng = this.showimpactAnalysisData.lon
           obj.lat  = this.showimpactAnalysisData.lat
           obj.radius = 5
          this.$mybus.emit('resourceEmitData',obj);
            // console.log(listInfoData.lon,listInfoData.lat)
        },
        showCricle(lon,lat,radius) {
            // console.log(radius)
        this.radius = radius
        if (this.circleEntity) this.hideCircle();
        if(this.labelentity) this.hidelabel()
        //   console.log( this.radius)
            // if(this.radius <= 0) return;
            let data = {
                id: 1,
                imageUrl: "/images/fireReport/ripple.png",
                lon: lon,
                lat: lat,
                height: 0,
                minR: 100,
                maxR: radius * 1000,
                deviationR: radius * 1000,
            };
            let r1 = data.minR,
                r2 = data.minR;
            function changeR1() {
                r1 = r1 + data.deviationR;
                if (r1 >= data.maxR) {
                    r1 = data.minR;
                }
                return r1;
            }
            function changeR2() {
                return r1;
            }
            // console.time('start')
            this.circleEntity = viewer.entities.add({
                name: "",
                // id: data.id,
                position: Cesium.Cartesian3.fromDegrees(
                    data.lon,
                    data.lat,
                    data.height
                ),
                ellipse: {
                    semiMinorAxis: data.maxR,
                    semiMajorAxis: data.maxR,
                    // semiMinorAxis: new Cesium.CallbackProperty(changeR2,false),
                    // semiMajorAxis: new Cesium.CallbackProperty(changeR1,false),
                    height: data.height,
                    material: new Cesium.ImageMaterialProperty({
                        // image: data.imageUrl,
                        repeat: new Cesium.Cartesian2(1.0, 1.0),
                        transparent: true,
                        color: Cesium.Color.RED.withAlpha(0.4),
                        // color: new Cesium.CallbackProperty(function () {
                        //   return Cesium.Color.WHITE.withAlpha(1.7-r1/data.maxR)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
                        // },false)
                    }),
                },
            });
            this.labelentity = viewer.entities.add({
              position: Cesium.Cartesian3.fromDegrees(parseFloat(lon)+0.01*radius,parseFloat(lat)+0.01,0),
              // 点
              point: {
                color: Cesium.Color.RED, // 点位颜色
                pixelSize: 10 // 像素点大小
              },
              // 文字
              label: {
                // 文本。支持显式换行符“ \ n”
                text:`${radius}公里`,
                // 字体样式，以CSS语法指定字体
                font: '14px  sans-serif',
                // 字体颜色
                fillColor: Cesium.Color.fromCssColorString('#ffffff'),
                // 背景颜色
                backgroundColor: Cesium.Color.fromCssColorString('#5082b2'),
                // 是否显示背景颜色
                showBackground: true,
                // 字体边框
                outline: true,
                // 字体边框颜色
                // outlineColor: Cesium.Color.WHITE,
                // 字体边框尺寸
                // outlineWidth: 10,
                // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
                scale: 1.0,
                // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
                // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                // 相对于坐标的水平位置
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                // 相对于坐标的水平位置
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
                pixelOffset: new Cesium.Cartesian2(10, 0),
                // 是否显示
                show: true
              }
              });
            // console.timeend
        },
          // 清除扩散波
        hideCircle() {
            viewer.entities.remove(this.circleEntity);
            this.circleEntity = null;
        },
        hidelabel(){
            viewer.entities.remove(this.labelentity);
            this.labelentity = null;
        }
    }
}
</script>
<style>
.el-pagination button, .el-pagination span:not([class*=suffix]){
    color:#fff;
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
    background: rgb(255,255,255,0.01);
    color: #ffffff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
    background:rgba(14,103,160,0.2);
    color: #00e5fd;
}
 .el-input-number__decrease, .el-input-number__increase {
        height: 14px !important;
        line-height: 14px !important;
        width: 19px;
        background: rgba(14,103,160,0.2);
        border: 0px solid #5082b2 !important;
        border-radius: 0;
      }
      .el-input-number__decrease {
        border-top: none !important;
      }
      
    .el-icon-arrow-down {
        color: #fff;
        line-height: 1.3;
      }
     .el-input__inner {
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        padding-right: 10px;
        background: rgba(60, 97, 133, 0.2);
        border: 1px solid #5082b2;
        font-size: 16px;
        color: #cde6ff;
        border-radius: 2px;
        padding: 0 10px;
        text-align: left;
      }
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftContent {
      position: absolute;
      top: 9.722222222222223vh;
      left: 1.25vw;
      padding-left: 1.25vw;
      width: 19.833333333333336vw;
      height: 89.35185185185185vh;
      box-sizing: border-box;
      background: url(/images/sjzx/leftPanel.png) no-repeat;
      background-size: 100% 100%;
      padding-left: 1.145833333333333vw;
      padding-right: 1.145833333333333vw;
      padding-top: 1.851851851851852vh;
      display: inline-block;
      .impactAnalysis{
          width:vw(280);
          height:vh(250);
          background:rgba(5,31,48,0.6);
          box-shadow: 0 0 5px #0c98cf;
          border-radius: 8px;
          position:absolute;
          top:vh(0);
          left:vw(420);
          padding:10px;
          display:none;
          box-sizing :border-box
        //   background:pink;
          .impactAnalysis-title{
              width:100%;
              height:vh(35);
              line-height :vh(30)
              font-size:vw(18)
              border-bottom 1px solid rgb(11, 153, 208);
              span:nth-child(2){
                  cursor:pointer;
                  float:right;
                  .closeinfo:hover{
                      color:#00e5fd
                  }
              }
          }
          .impactAnalysis-radius{
              width:100%;
              height:vh(38);
              line-height:vh(38);
              margin-top:vh(10)
              span:nth-child(1){
                 margin-left:vw(10)
              }
              span:nth-child(2){
                margin-left:vw(10)
              }
          }
          .impactAnalysis-jingdu{
              width:100%;
              height:vh(40);
              line-height:vh(38);
              margin-top:vh(10);
              margin-bottom:vh(10);
              span:nth-child(1){
                 margin-left:vw(10)
                 float:left
              }
              span:nth-child(2){
                width:180px;
                height: 32px;
                line-height: 28px;
                padding-left: 10px;
                padding-right: 10px;
                background: rgba(60, 97, 133, 0.2);
                border: 1px solid #5082b2;
                font-size: 16px;
                color: #cde6ff;
                border-radius: 2px;
                padding: 0 10px;
                text-align: left;
                display:block;
                margin-left:vw(10)
                float:left
              }
          }
          .eventBriefing{
              width:vw(110);
              height:vh(30);
              line-height:vh(30);
              border:1px solid #5082b2;
              text-align :center
              box-sizing :border-box;
              border-radius:3px;
              cursor:pointer;
              float:right;
              margin-right:vw(10);
          }
      }
      .specialNewspaper{
             }
      .leftContent-title{
          width:100%;
          height:vh(30);
          line-height:vh(30);
          font-size:vw(18);
          margin-bottom :vh(16)
          span:nth-chilld(1){
               float:left;
          }
          span:nth-child(2){
            margin-left:vw(10);
            font-size:vw(17)
            //   .back{
            //       color:rgb(11, 153, 208);
            //       font-size :vw(18)
            //   }
          }
            span:nth-child(3){
            margin-left:vw(40)
            //   .back{
            //       color:rgb(11, 153, 208);
            //       font-size :vw(18)
            //   }
          }
          .font{
              color:rgb(11, 153, 208);
              font-size :vw(18)
          }
         .back{
                  color:rgb(11, 153, 208);
                  font-size :vw(18);
                  cursor:pointer
              }
      }
      .listInfo{
          width:vw(540);
          height :vh(220);
        //   background :pink
         background:rgba(5, 31, 48.0.9);
          position:fixed;
          z-index:999;
          display:none;
          box-shadow: 0 0 5px rgb(12, 152, 207);
          border-radius:8px;
          .listInfo-title{
              width:92%;
            //   height:vh(50);
            //   line-height:vh(50);
              font-size :vw(17);
              padding:10px;
             box-sizing :border-box;
            //   border-bottom:1px solid #00e5fd;
              span:nth-child(1){
                text-align:center;
                // float:left;
                width:100%;
                line-height:vh(20);
                margin-right:vw(20);
              }
              span:nth-child(2){
                  position:absolute;
                  top:vh(10);
                  right:vw(10);
                  float:right;
                  cursor:pointer
                  .closeinfo{
                  }
                  .closeinfo:hover{
                        color:#00e5fd
                  }
              }
          }
          .listInfo-middle{
              width:100%;
              height:vh(90);
              margin-top:vh(20)
            //   background :pink;
              .listInfo-middleinfo1{
                  width:30%;
                  height :vh(90);
                //   background: url(/images/yjjy/info-bg.png) no-repeat;
                  background-size: 100% 100%;
                  background:rgba(14,103,160,0.2);
                  float:left;
                  margin-right:vw(8);
                  margin-left:vw(10);
                  div:nth-child(1){
                      height:vh(45)
                      text-align:center;
                      line-height:vh(45);
                      font-size :vw(18);
                    //   span:nth-child(1){
                    //       color:rgb(255, 138, 0)
                    //   }
                  }
                  div:nth-child(2){
                      height:vh(45);
                      text-align:center;
                      line-height:vh(40)
                      font-size :vw(18);
                       span:nth-child(1){
                          color:rgb(255, 138, 0)
                      }
                  }
              }
              .listInfo-middleinfo2{
                  width:30%;
                  height :vh(90);
                //   background: url(/images/yjjy/info-bg.png) no-repeat;
                  background-size: 100% 100%;
                  background:rgba(14,103,160,0.2);
                  float:left;
                  margin-right:vw(8);
                  margin-left:vw(10);
                  div:nth-child(1){
                      height:vh(45)
                      text-align:center;
                      line-height:vh(45);
                      font-size :vw(18);
                    //   span:nth-child(1){
                    //       color:rgb(0, 216, 151)
                    //   }
                  }
                  div:nth-child(2){
                      height:vh(45);
                      text-align:center;
                      line-height:vh(40)
                      font-size :vw(18);
                    //   color:rgb(0, 216, 151)
                       span:nth-child(1){
                          color:rgb(0, 216, 151)
                      }
                  }
              }
              .listInfo-middleinfo3{
                  width:30%;
                  height :vh(90);
                //   background: url(/images/yjjy/info-bg.png) no-repeat;
                  background-size: 100% 100%;
                  background:rgba(14,103,160,0.2);
                  float:left;
                  margin-right:vw(8);
                  margin-left:vw(10);
                  div:nth-child(1){
                      height:vh(45)
                      text-align:center;
                      line-height:vh(45);
                      font-size :vw(18);
                    //   span:nth-child(1){
                    //       color:rgb(254, 64, 102)
                    //   }
                  }
                  div:nth-child(2){
                      height:vh(45);
                      text-align:center;
                      line-height:vh(40)
                      font-size :vw(18);
                    //   color:rgb(254, 64, 102)
                      span:nth-child(1){
                          color:rgb(254, 64, 102)
                      }
                  }
              }
          }
          .listInfo-bot{
              width:100%;
              height:vh(30)
              padding:10px;
              box-sizing:border-box
              div:nth-child(1){
                  width:vw(130);
                  height:vh(30);
                  float:left
                //   .poi{
                //       font-size :vw(25);
                //       color:#0b99d0;
                //       margin-left:vw(20)
                //       cursor:pointer;
                //       margin-right:vw(10)
                //   }
                //   .poi:hover{
                //       color:#00e5fd
                //   }
                span{
                    width:vw(90);
                    height:vh(30);
                    line-height:vh(28);
                    border:1px solid #5082b2;
                    display:block;
                    border-radius: 0.15625vw;
                    text-align :center;
                    cursor:pointer
                }
                span:hover{
                    color:#00e5fd
                }
              }
              div:nth-child(2){
                  width:vw(300);
                  height:vh(30);
                  line-height:vh(30)
                  float:right
              }
            //   span:nth-child(2){
            //       margin-left:vw(80);
            //        color:#0b99d0;
            //   }
            //   span:nth-child(3){
            //     //   margin-left:vw(80);
            //       color :#acfaff
            //   }
            //   span:nth-child(4){
            //   }
          }
      }
      .leftContent-Nocon{
          width:100%;
          height:vh(200);
          line-height:vh(200)
          text-align:center;
      }
      .leftContent-con{
          width:100%;
          height:vh(830);
        //   background:pink;
        overflow-y:auto;
        // background:blue;
          .leftContent-top{
             width:100%;
             height:vh(830);
            //  background:blue; 
            	
             .leftContent-top-inner{
                 width:100%;
                 height :vh(110);
                 background :rgba(14, 103, 160,0.2)
                 margin-bottom :vh(20)
                 cursor:pointer;
                 padding:10px;
                 box-sizing :border-box
                //  .leftContent-top-innerleft{
                //      width:vw(60);
                //      height:vh(86);
                //      float:left
                //      img{
                //          width:vw(60);
                //          height:vh(83);
                //          margin-top:vh(4)
                //      }
                //  }
                 .leftContent-top-innerright{
                     width:vw(260);
                     height:vh(90);
                     float:left;
                     margin-left:vh(10);
                     .leftContent-top-innerright-title{
                        width:vw(260);
                        height:vh(30);
                        overflow: hidden;
                        text-overflow:ellipsis;
                         white-space: nowrap;
                          line-height:vh(24)
                          color:#00e5fd;
                        span:nth-child(1){
                            img{
                                width:18px;
                                height:18px;
                                vertical-align:top;
                            }
                        }
                        span:nth-child(2){
                            margin-left:vw(10);
                             color:#00e5fd;
                        }
                     }
                     .leftContent-top-innerright-type{
                        width:vw(260);
                        height:vh(30);
                        line-height:vh(28)
                        span:nth-child(1){
                            padding-top:vh(5)
                            box-sizing:border-box;
                            img{
                                width:20px;
                                height:20px;
                                vertical-align:top;
                            }
                        }
                        span:nth-child(2){
                            margin-left:vw(10)
                        }
                     }
                     .leftContent-top-innerright-time{
                        width:vw(260);
                        height:vh(30);
                        line-height:vh(35)
                        span:nth-child(1){
                            img{
                                width:16px;
                                height:16px;
                                vertical-align:middle;
                                margin-top:-5px
                            }
                        }
                        span:nth-child(2){
                            margin-left:vw(12)
                        }
                     }
                 }
             }
             .isActive {
			  background :rgba(14, 103, 160,0.6);
              border-left:3px solid #00e5fd;
			}
          } 
      }
      .leftContent-bot{
             width:vw(100);
             height:vh(40);
            //  background:pink; 
             margin-top:vh(10)
        }
    .leftContent-info{
        width:100%;
        height:vh(880);
         overflow-y:auto;
        .leftContent-infotitle{
            width:100%
            height:vh(30);
            font-size :vw(18);
            // background:pink;
            padding-top:vh(-10);
            box-sizing:border-box;
            margin-right:vw(5)
            img{
                width:16px;
                height:16px
            }
            span:nth-child(2){
                margin-left:vw(10);
                // margin-top:vh(-5);
            }
             span:nth-child(3){
                margin-left:vw(60);
                // background:pink;
                cursor:pointer;
                width:vw(120);
                height:vh(25);
                display:block;
                border: 1px solid #5082b2;
                text-align:center;
                float:right;
                font-size:vw(16);
                border-radius:vw(3);
                line-height:vh(25);
                box-sizing:border-box;
                // margin-top:vh(-10)
            }
            span:nth-child(3):hover{
                color:#00e5fd;
            }

        }
        .leftContent-infotcon{
            width:100%;
            background :rgba(14, 103, 160,0.2)
            padding:10px;
            box-sizing:border-box;
            .leftContent-infotcon-top{
                width:100%;
                height:vh(86);
                // background:pink;
                // .leftContent-infotcon-topleft{
                //     width:vw(60);
                //      height:vh(86);
                //      float:left
                //      img{
                //          width:vw(60);
                //          height:vh(83);
                //          margin-top:vh(4)
                //      }
                // }
                .leftContent-infotcon-topright{
                     width:vw(260);
                     height:vh(90);
                     float:left;
                    //  margin-left:vh(10); 
                     .leftContent-infotcon-topright-title{
                        width:vw(260);
                        height:vh(30);
                        overflow: hidden;
                        text-overflow:ellipsis;
                         white-space: nowrap;
                          line-height:vh(30)
                          span:nth-child(1){
                              color:#ACFAFF
                          }
                     }
                }
            }
            .leftContent-infotcon-bot{
                width:100%;
                .leftContent-infotcon-botpot{
                     height:vh(30);
                      width:vw(350);
                     line-height :vh(30);
                       overflow: hidden;
                        text-overflow:ellipsis;
                         white-space: nowrap;
                    span:nth-child(1){
                         color:#ACFAFF
                    }

                }
                .leftContent-infotcon-botpotdes{
                    width:100%;
                    span:nth-child(1){
                         color:#ACFAFF
                         height:vh(30);
                         line-height :vh(30);
                    }
                    span:nth-child(2){
                        ::v-deep p {
						margin-top: vh(20);
						display: block;
						text-indent: 2em;
						line-height: vh(30);
						// background: pink;
					}
                    }
                }
            }
        }
    }
    }
}
</style>